import React from 'react';
import { Card, Menu, Divider } from 'antd';
import GGEditor, { Flow, EditableLabel, RegisterNode, setAnchorPointsState } from 'gg-editor';
import DialogCommand from '@/pages/Dialog/Add/dialogCommand';
import DialogItem from '@/pages/Dialog/Add/dialogItem';
// import { NodePanel, EdgePanel, MultiPanel, CanvasPanel } from './dialogDetail';
import DialogContextMenu from '@/pages/Dialog/Add/dialogContextMenu';
import styles from '@/pages/Dialog/Add/dialogFlow.less';
import EdgeMenu from '@/pages/Dialog/Add/edgeMenu';

const Save = React.lazy(() => import('./save'));
const RightDrawer = React.lazy(() => import('../common/Drawer'));

class DialogFlow extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        nodes: [],
        edges: [],
      },
      fullScreen: false,
      selectNode: {
        title: '',
        model: '',
        nodeType: '',
      },
      eventObj: null,
      visible: false,
    };
  }

  componentDidMount() {
    this.graphNode.graph.changeSize(952, 800);
  }

  mindFitview = e => {
    this.graphNode.graph.fitView();
  };

  mindFullScreen = () => {
    let { fullScreen } = this.state;
    fullScreen = !fullScreen;
    this.setState({
      fullScreen,
    });

    if (fullScreen) {
      this.graphNode.graph.changeSize(952, window.innerHeight - 50);
    } else {
      this.graphNode.graph.changeSize(952, 500);
    }
    this.graphNode.graph.fitView();
  };

  seeNodeDetail = e => {
    e.preventDefault();
    let { selectNode, eventObj } = this.state;
    if (e.item) {
      selectNode = e.item._cfg.model;
      eventObj = e;
      this.setState({
        selectNode,
        eventObj,
        editShow: false,
      });
    } else {
      this.setState({
        selectNode: {
          title: '',
          model: '',
          nodeType: '',
        },
        eventObj: null,
        editShow: false,
      });
    }
  };



  menuClickhandle = (e, item) => {
    const that = this;
    this.NodeMenuRef.hideContextMenu();
    if (e.key === 'edit') {
      this.setState({
        visible: true,
      });
    }

    if (e.key === 'delete_node') {
      this.graphNode.graph.removeItem(item, true);
    }

    if (e.key === 'delete_edge') {
      this.graphNode.graph.removeItem(item, true);
    }
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  openPage = type => {
    if (type === 'charts') {
      this.props.showCharts();
    } else {
      this.setState({
        selectNode: {
          title: '全局设置',
          modal: type,
        },
        visible: true,
      });
    }
  };

  showTrainProgress = () => {
    this.props.showTrains();
  };

  render() {
    const { selectNode, visible } = this.state;
    const { title, modal, nodeType, id } = selectNode;
    const { dialogId, data,status } = this.props;
    return (
      <div>
        <GGEditor className={this.state.fullScreen ? styles.fullscreen : styles.body}>
          <DialogCommand
            fitView={this.mindFitview}
            isFullScreen={this.state.fullScreen}
            fullScreen={this.mindFullScreen}
            openPage={this.openPage}
          />

          <DialogItem />

          <Flow
            className={styles.graph}
            data={data}
            onContextMenu={this.seeNodeDetail}
            ref={e => (this.graphNode = e)}
          />

          <EditableLabel />
          <DialogContextMenu
            node={this.state.selectNode}
            eventObj={this.state.eventObj}
            menuClick={this.menuClickhandle}
            onRef={r => (this.NodeMenuRef = r)}
            type={this.state.menuType}
          />
          <EdgeMenu
            node={this.state.selectNode}
            eventObj={this.state.eventObj}
            menuClick={this.menuClickhandle}
            onRef={r => (this.NodeMenuRef = r)}
            type={this.state.menuType}
          />
          <RegisterNode
            name="startNode"
            config={{
              getCustomConfig(model) {
                return {
                  size: [90, 48],
                  wrapperStyle: {
                    fill: model.color,
                  },
                  contentStyle: {
                    fill: model.color,
                  },
                  labelStyle: {
                    fill: '#FFFFFF',
                  },
                };
              },
              setState(name, value, item) {
                setAnchorPointsState.call(
                  this,
                  name,
                  value,
                  item,
                  (item, anchorPoint) => {
                    const { width, height } = item.getKeyShape().getBBox();
                    const [x, y] = anchorPoint;
                    return {
                      x: width * x - width / 2,
                      y: height * y - height / 2,
                    };
                  },
                  (item, anchorPoint) => {
                    const { width, height } = item.getKeyShape().getBBox();
                    const [x, y] = anchorPoint;
                    return {
                      x: width * x - width / 2,
                      y: height * y - height / 2,
                    };
                  }
                );
              },
              getAnchorPoints() {
                return [[0.5, 1]];
              },
            }}
            extend="rect"
          />
          <RegisterNode
            name="centerNode"
            config={{
              getCustomConfig(model) {
                return {
                  size: [90, 48],
                  wrapperStyle: {
                    fill: model.color,
                  },
                  contentStyle: {
                    fill: model.color,
                  },
                  labelStyle: {
                    fill: '#FFFFFF',
                  },
                };
              },
              setState(name, value, item) {
                setAnchorPointsState.call(
                  this,
                  name,
                  value,
                  item,
                  (item, anchorPoint) => {
                    const { width, height } = item.getKeyShape().getBBox();
                    const [x, y] = anchorPoint;
                    return {
                      x: width * x - width / 2,
                      y: height * y - height / 2,
                    };
                  },
                  (item, anchorPoint) => {
                    const { width, height } = item.getKeyShape().getBBox();
                    const [x, y] = anchorPoint;
                    return {
                      x: width * x - width / 2,
                      y: height * y - height / 2,
                    };
                  }
                );
              },
              getAnchorPoints() {
                return [
                  [0.5, 0],
                  [0.5, 1],
                  [0, 0.5],
                  [1, 0.5],
                ];
              },
            }}
            extend="rect"
          />
          <RegisterNode
            name="caseNode"
            config={{
              getCustomConfig(model) {
                return {
                  size: [90, 48],
                  wrapperStyle: {
                    fill: model.color,
                  },
                  contentStyle: {
                    fill: model.color,
                  },
                  labelStyle: {
                    fill: '#FFFFFF',
                  },
                };
              },
              setState(name, value, item) {
                setAnchorPointsState.call(
                  this,
                  name,
                  value,
                  item,
                  (item, anchorPoint) => {
                    const { width, height } = item.getKeyShape().getBBox();
                    const [x, y] = anchorPoint;
                    return {
                      x: width * x - width / 2,
                      y: height * y - height / 2,
                    };
                  },
                  (item, anchorPoint) => {
                    const { width, height } = item.getKeyShape().getBBox();
                    const [x, y] = anchorPoint;
                    return {
                      x: width * x - width / 2,
                      y: height * y - height / 2,
                    };
                  }
                );
              },
              getAnchorPoints() {
                return [
                  [0.5, 0],
                  [0.5, 1],
                  [0, 0.5],
                  [1, 0.5],
                ];
              },
            }}
            extend="diamond"
          />
          <RegisterNode
            name="actionNode"
            config={{
              getCustomConfig(model) {
                return {
                  size: [90, 48],
                  wrapperStyle: {
                    fill: model.color,
                  },
                  contentStyle: {
                    fill: model.color,
                  },
                  labelStyle: {
                    fill: '#FFFFFF',
                  },
                };
              },
              setState(name, value, item) {
                setAnchorPointsState.call(
                  this,
                  name,
                  value,
                  item,
                  (item, anchorPoint) => {
                    const { width, height } = item.getKeyShape().getBBox();
                    const [x, y] = anchorPoint;
                    return {
                      x: width * x - width / 2,
                      y: height * y - height / 2,
                    };
                  },
                  (item, anchorPoint) => {
                    const { width, height } = item.getKeyShape().getBBox();
                    const [x, y] = anchorPoint;
                    return {
                      x: width * x - width / 2,
                      y: height * y - height / 2,
                    };
                  },
                );
              },
              getAnchorPoints() {
                return [
                  [0.5, 0],
                  [0.5, 1],
                  [0, 0.5],
                  [1, 0.5],
                ];
              },
            }}
            extend="circle"
          />
          <RegisterNode
            name="endNode"
            config={{
              getCustomConfig(model) {
                return {
                  size: [90, 48],
                  wrapperStyle: {
                    fill: model.color,
                  },
                  contentStyle: {
                    fill: model.color,
                  },
                  labelStyle: {
                    fill: '#FFFFFF',
                  },
                };
              },
              setState(name, value, item) {
                setAnchorPointsState.call(
                  this,
                  name,
                  value,
                  item,
                  (item, anchorPoint) => {
                    const { width, height } = item.getKeyShape().getBBox();
                    const [x, y] = anchorPoint;
                    return {
                      x: width * x - width / 2,
                      y: height * y - height / 2,
                    };
                  },
                  (item, anchorPoint) => {
                    const { width, height } = item.getKeyShape().getBBox();
                    const [x, y] = anchorPoint;
                    return {
                      x: width * x - width / 2,
                      y: height * y - height / 2,
                    };
                  }
                );
              },
              getAnchorPoints() {
                return [[0.5, 0]];
              },
            }}
            extend="ellipse"
          />
          <Divider />
          <Save dialogId={dialogId} showTrain={this.showTrainProgress} graphObj={this.graphNode} status={status} />
        </GGEditor>
        <RightDrawer
          title={title}
          model={modal}
          visible={visible}
          dialogId={dialogId}
          onClosed={this.onClose}
          nodeIds={id}
        />
      </div>
    );
  }
}

export default DialogFlow;
